<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>新闻管理系统 - 注册</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Font Awesome 本地备份 -->
    <link rel="stylesheet" href="css/fontawesome.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body class="bg-light">
    <div class="container">
        <div class="row justify-content-center mt-5">
            <div class="col-md-6 col-lg-4">
                <div class="card shadow-lg">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <i class="fas fa-user-plus fa-3x text-danger mb-3"></i>
                            <h2 class="text-danger">用户注册</h2>
                        </div>
                        <%-- 显示错误信息 --%>
                        <% String message = (String)request.getAttribute("message");
                            if(message != null && !message.isEmpty()) { %>
                        <div class="alert alert-danger" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <%= message %>
                        </div>
                        <% } %>
                        <form id="registerForm" action="registerServlet" method="post">
                            <div class="form-group mb-3">
                                <label for="username" class="form-label">
                                    <i class="fas fa-user me-2"></i>用户名
                                </label>
                                <input type="text" class="form-control" id="username" name="username" required>
                                <div class="invalid-feedback">请输入用户名</div>
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="password" class="form-label">
                                    <i class="fas fa-lock me-2"></i>密码
                                </label>
                                <input type="password" class="form-control" id="password" name="password" required>
                                <div class="invalid-feedback">请输入密码</div>
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="email" class="form-label">
                                    <i class="fas fa-envelope me-2"></i>邮箱
                                </label>
                                <input type="email" class="form-control" id="email" name="email" required>
                                <div class="invalid-feedback">请输入有效的邮箱地址</div>
                            </div>
                            
                            <div class="form-group mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="agree" name="agree" required>
                                    <label class="form-check-label" for="agree">
                                        我已阅读并同意 <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">服务条款</a>
                                    </label>
                                    <div class="invalid-feedback">
                                        必须同意服务条款才能注册
                                    </div>
                                </div>
                            </div>
                            
                            <button type="submit" class="btn btn-danger w-100 mb-3">
                                <i class="fas fa-user-plus me-2"></i>注册
                            </button>
                            
                            <div class="text-center">
                                <a href="login.jsp" class="text-decoration-none">
                                    <i class="fas fa-arrow-left me-1"></i>返回登录
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 服务条款模态框 -->
    <div class="modal fade" id="termsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">服务条款</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>1. 用户注册时应当提供真实、准确的信息。</p>
                    <p>2. 用户应当妥善保管账号和密码。</p>
                    <p>3. 用户不得利用本系统从事违法活动。</p>
                    <!-- 添加更多条款 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 